<template>
  <Tooltip :transfer="transfer" :content="content" theme="light">
    <Badge :status="badge" class="only-dot" :class="error?'error':''" />
    <div slot="content">
      <p class="tip-title">
        {{content}}
        <Switch class="ml-5" v-if="statuschangable" :value="status" :before-change="beforeStatusChanged" true-value="ON" false-value="OFF" size="small" />
      </p>
      <Divider v-if="$slots.default" class="divider-tiny" />
      <p style="width:225px;word-break:normal;white-space:normal;">
        <slot></slot>
      </p>
    </div>
  </Tooltip>
</template>
<script>
  export default {
    name: 'comp_statusbadge',
    props: {
      content: String,
      badge: String,
      status: [Boolean, String],
      statuschangable: {
        type: Boolean,
        default: true
      },
      transfer: {
        type: Boolean,
        default: true
      },
      error: {
        type: [Boolean, String],
        default: false
      },
    },
    data() {
      return {
        visiable: false,
      }
    },
    mounted() {
    },
    methods: {
      beforeStatusChanged() {
        return new Promise((resolve, reject) => {
          this.$Modal.confirm({
            title: this.$t('status.changemodel.title'),
            content: this.$t('status.changemodel.content'),
            onOk: () => this.$emit('onChanged')
          })
        })
      }
    }
  }
</script>
